<!-- eslint-disable vue/html-indent -->
<template>
  <div class="difficult_detail">
    <div class="title">
      <p class="tip">详情</p>
      <button class="btn" @click="goBack">返回</button>
    </div>
    <div class="details">
      <div class="information">
        <p class="titBox">基本信息</p>
        <div class="essential bottom">
          <!-- <div class="faultDecriptSummary">测试任务事件标题</div> -->
          <el-descriptions class="margin-top" :column="2" direction="vertical" border>
            <!-- <el-descriptions-item>
                        <template slot="label"> 疑难工单ID </template>
                        {{ changeList.diffId }}
                    </el-descriptions-item> -->
            <el-descriptions-item label=" 疑难单号">
              {{ changeList.no ? changeList.no : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="运维单号">
              {{
                changeList && changeList.fmBiz && changeList.fmBiz.faultNo
                  ? changeList.fmBiz.faultNo
                  : '--'
              }}
            </el-descriptions-item>
            <el-descriptions-item label="所属工作组">
              {{ changeList.groupName ? changeList.groupName : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
              {{ changeList.createrTime ? changeList.createrTime : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="所属系统">
              {{ changeList.sysName ? changeList.sysName : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="来源">
              {{
                changeList.source == 1
                  ? '手工转'
                  : changeList.source == 2
                  ? '处理超时'
                  : changeList.source == 3
                  ? '步骤超时'
                  : '--'
              }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { ref, onMounted } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { getDifficultEventsList } from '@/http/api/operation';
  const route = useRoute();
  const router = useRouter();
  const changeCode = ref(router.options.history.state.back.split('/')[1]);
  const changeList = ref('');
  const type = ref(route.params.type);
  const fmId = ref(route.params.value);
  onMounted(() => {
    getDifficult_List();
  });
  const getDifficult_List = () => {
    getDifficultEventsList({
      pageNum: '1',
      pageSize: '10',
      no: fmId.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      changeList.value = res.data.rows[0];
    });
  };
  const goBack = () => {
    //  router.go(-1);
    router.push({
      name: changeCode.value,
      params: {
        type: type.value
      }
    });
  };
</script>
<style lang="less" scoped>
  .difficult_detail {
    width: 100%;
    height: 100vh;
    // background: rgb(84, 84, 95);
    background: #eaeef4;
    padding: 20px;
    box-sizing: border-box;
    .title {
      display: flex;
      justify-content: space-between;
      height: 34px;
      margin-bottom: 12px;
      .tip {
        line-height: 34px;
        font-size: 14px;
        font-weight: 400;
        color: #46545d;
      }
      .btn {
        width: 80px;
        height: 34px;
        background: #007af5;
        border-radius: 2px;
        color: #fff;
        font-size: 12px;
        border: 0;
      }
    }
    .details {
      display: flex;
      justify-content: space-between;
      .information {
        width: 100%;
        .titBox {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #46545d;
          margin-bottom: 20px;
        }

        .essential {
          // margin-bottom: 40px;
          padding: 20px;
          background: #fff;
          border-radius: 6px;
          .faultDecriptSummary {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #46545d;
            margin-bottom: 20px;
          }
          .el-descriptions {
            :deep(.is-bordered) {
              //border-collapse: separate;
              tbody {
                margin-bottom: 3px;

                .el-descriptions-row {
                  // :deep(.el-descriptions-item__label:not(.is-bordered-label)) {
                  // }
                  .el-descriptions-item__cell {
                    &.el-descriptions-item__label {
                      background: #fafafa !important;
                      padding: 10px 10px 0;
                      border: 3px solid #fafafa;
                      border-bottom: none;
                      border-right: 3px solid #fff;
                      font-size: 14px;
                      font-weight: 400;
                      color: #929ea8;
                    }
                    &.el-descriptions-item__content {
                      background: #fafafa !important;
                      padding: 5px 10px;
                      border-left: 3px solid #fafafa;
                      border-top: none;
                      border-right: 3px solid #fff;
                      border-bottom: 3px solid #fff;
                      font-size: 14px;
                      font-weight: 400;
                      color: #46545d;
                    }
                  }
                  :deep(.el-descriptions-item__label) {
                    //margin-right: 3px;
                    background: #fafafa !important;
                    padding: 10px 10px 0;
                  }
                }
              }
            }
          }
        }
      }
      .technological {
        width: 35%;
        .titBox {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #46545d;
          margin-bottom: 20px;
        }
        // .title {
        //     color: #fff;
        //     font-size: 24px;
        //     line-height: 55px;
        //     position: relative;
        //     .btn {
        //         height: 40px;
        //         width: 100px;
        //         position: absolute;
        //         top: 15px;
        //         right: 0;
        //     }
        // }
        .el-divider {
          .el-divider__text {
            font-size: 16px;
            line-height: 35px;
          }
        }
        .block {
          .el-timeline {
            width: 80%;
            margin: 0 auto;

            :deep(.el-timeline-item__timestamp),
            :deep(.el-timeline-item__content) {
              color: #fff;
              .content {
                border-radius: 10px;
                .el-card__body {
                  .text {
                    display: inline-block;
                    width: 50%;
                    min-height: 30px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
